<template>
	<view class="content  bg-img ">
		<radio-group class="lang" @change="radioChange">
			<label v-for="(item, index) in dataList" :key="index" class="lang-list">
				<view class="option">
					<view class="img"><image :src="item.imgUrl" mode="widthFix"></image></view>
					<text class="txt">{{ item.value }}</text>
				</view>
				<radio :value="item.value" :checked="item.checked"></radio>
			</label>
		</radio-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			dataList: [
				{
					imgUrl: '../../static/en.png',
					value: 'English',
					checked: true,
					language: 'en-US'
				},
				{
					imgUrl: '../../static/cn.png',
					value: '简体中文',
					checked: false,
					language: 'zh-CN'
				},

				{
					imgUrl: '../../static/rr.png',
					value: 'Japanese',
					checked: false,
					language: 'zh-RY'
				},
				{
					imgUrl: '../../static/hh.png',
					value: 'korean',
					checked: false,
					language: 'zh-HW'
				}
			]
		};
	},
	computed: {
		i18n() {
			return this.$t('message');
		}
	},
	onLoad() {},
	onShow() {
		let items = this.dataList;
		let ind = uni.getStorageSync('index'),
			lang = uni.getStorageSync('select');
		// 判断选择的语言
		console.log('ind >>  ', ind);
		if (lang) {
			items[ind].checked = true;
			this.$i18n.locale = 'en-US';
		} else {
			this.$i18n.locale = 'en-US';
		}
		// 导航栏多语言
		// uni.setNavigationBarTitle({
		// 	title: this.i18n.tabBar.language,
		// });
	},
	methods: {
		radioChange(e) {
			let _this = this;
			let items = _this.dataList;
			for (let i = 0; i < items.length; i++) {
				if (items[i].value == e.target.value) {
					items[i].checked = true;
					// console.log(e.target.value);
					// console.log(items[i].value);

					// 存储选择的下标
					uni.setStorageSync('index', i);
					// 存储选择的语言
					uni.setStorageSync('select', items[i].language);
					_this.$i18n.locale = items[i].language;
					// tabbar多语言
					uni.setTabBarItem({
						index: 0,
						text: _this.i18n.tabBar.home
					});
					uni.setTabBarItem({
						index: 1,
						text: _this.i18n.tabBar.me
					});
					break;
				}
			}
			setTimeout(function() {
				uni.navigateBack();
			}, 500);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 40upx 30upx;
	width: 100vw;
	height: 100vh;
	background-image: url(../../static/bgImg1.png);
	// display: flex;
	// flex-direction: column;
	// justify-content: space-around;
}
.lang {
	display: flex;
	flex-direction: column;
}
.lang .lang-list {
	margin-bottom: 30rpx;
	padding: 10upx 30upx;
	display: flex;
	justify-content: space-between;
	border: 2rpx solid #fff;
	border-radius: 16rpx;
}
.lang .lang-list:last-child {
	margin-bottom: 0;
}
.lang .lang-list .option {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lang .lang-list .option .img {
	margin-right: 30upx;
	width: 40upx;
	line-height: 1;
}
.lang .lang-list .option .img image {
	width: 100%;
}
.lang .lang-list .option .txt {
	font-size: 28upx;
	color: #FFFFFF;
}
.lang .lang-list radio {
	transform: scale(0.7);
}
/deep/.uni-radio-input-checked{
	background-color: #04bd9e;
	
}
</style>
